<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Page-tools :show-before="true">
        <span slot="before">共166条记录</span>
        <template slot="after">
          <el-button
            size="small"
            type="warning"
            @click="$router.push('/import')"
            >导入</el-button
          >
          <el-button
            :disabled="!checkPermission('exportEmployee')"
            size="small"
            type="danger"
            @click="exportExcel"
            >导出</el-button
          >
          <el-button
            :disabled="!checkPermission('addEmployee')"
            size="small"
            type="primary"
            @click="showDialog = true"
            >新增员工</el-button
          >
        </template>
      </Page-tools>
      <el-card>
        <el-table border :data="employeeList">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="姓名" sortable="">
            <template #default="{ row }">
              <img :src="row.staffPhoto" alt="" class="avatar" />
            </template>
          </el-table-column>
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column
            label="聘用形式"
            sortable=""
            prop="formOfEmployment"
            :formatter="formatEmployment"
          />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry">
            <template #default="{ row }">
              {{ row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="">
            <template #default="{ row }">
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
                >查看</el-button
              >
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)"
                >角色</el-button
              >
              <el-button type="text" size="small" @click="delEmployee(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :total="page.total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <AddEmployee :show-dialog="showDialog" />
      <AssignRole
        :user-id="userId"
        ref="assignRole"
        :show-dialog.sync="showAssignRole"
      />
    </div>
  </div>
</template>

<script>
import AddEmployee from "@/views/employees/components/add-employee.vue";
import { getEmployee, delEmployee } from "@/api/employees";
import employeeEnum from "@/api/constant/employees";
import { export_json_to_excel } from "@/vendor/Export2Excel";
import { formatDate } from "@/filters";
import AssignRole from "./components/assign-role.vue";
export default {
  components: { AddEmployee, AssignRole },
  data() {
    return {
      page: {
        page: 2,
        size: 5,
        total: 0,
      },
      employeeList: [],
      showDialog: false,
      showAssignRole: false,
      userId: "",
    };
  },
  created() {
    this.getEmployee();
  },
  methods: {
    async exportExcel() {
      const { rows } = await getEmployee({ page: 1, size: this.page.total });
      const header = [
        "手机号",
        "姓名",
        "入职日期",
        "聘用形式",
        "转正日期",
        "工号",
        "部门",
      ];
      const data = rows.map((userObj) => {
        return this.obj2arr(userObj, header);
      });

      export_json_to_excel({
        header,
        data,
      });
    },
    obj2arr(userObj, header) {
      const newArr = [];
      const dict = {
        手机号: "mobile",
        姓名: "username",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
      };
      header.forEach((key) => {
        const enkey = dict[key];
        let value = userObj[enkey];
        if (enkey === "formOfEmployment") {
          const obj = employeeEnum.hireType.find((item) => item.id === value);
          value = obj ? obj.value : "未知形式";
        }
        if (enkey === "timeOfEntry" || enkey === "correctionTime") {
          value = formatDate(value);
        }
        newArr.push(value);
      });
      return newArr;
    },
    async getEmployee() {
      const { rows, total } = await getEmployee(this.page);
      this.employeeList = rows.map((user) => {
        return {
          ...user,
          enableState: user.enableState || 1,
        };
      });
      this.page.total = total;
    },
    currentChange(newPage) {
      this.page.page = newPage;
      this.getEmployee();
    },
    formatEmployment(rol, column, cell, index) {
      const obj = employeeEnum.hireType.find((item) => item.id === cell);
      return obj ? obj.value : "未知";
    },

    async delEmployee(id) {
      // 询问
      await this.$confirm("是否确定删除");
      // 发请求
      await delEmployee(id);
      // 提示用户
      this.$message.success("删除成功");
      // 更新页面
      this.getEmployee();
    },
    async assignRole(id) {
      await this.$refs.assignRole.getUserDetailById(id);
      this.showAssignRole = true;
      this.userId = id;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: 180px;
  height: 140px;
  object-fit: cover;
}
</style>